<template>
  <!-- 统计卡片 -->
  <div class="statistics-wrapper">
    <div class="statistics-card">
      <div class="card-icon">
        <CreditCardOutlined class="fontIcon" />
      </div>
      <div class="card-content">
        <div class="card-title">累计结算费用</div>
        <div class="card-value">12,345.62<span class="smSize">亿</span></div>
      </div>
    </div>

    <div class="statistics-card">
      <div class="card-icon">
        <BookOutlined class="fontIcon" />
      </div>
      <div class="card-content">
        <div class="card-title">发布需求计划数</div>
        <div class="card-value">1,234个</div>
      </div>
    </div>

    <div class="statistics-card">
      <div class="card-icon">
        <ContainerOutlined class="fontIcon" />
      </div>
      <div class="card-content">
        <div class="card-title">发布需求计划总容量</div>
        <div class="card-value">1,234.56kWh</div>
      </div>
    </div>

    <div class="statistics-card">
      <div class="card-icon">
        <DatabaseOutlined class="fontIcon" />
      </div>
      <div class="card-content">
        <div class="card-title">需求申报次数</div>
        <div class="card-value">1,001次</div>
      </div>
    </div>

    <div class="statistics-card">
      <div class="card-icon">
        <PieChartOutlined class="fontIcon" />
      </div>
      <div class="card-content">
        <div class="card-title">中标次数</div>
        <div class="card-value">1,000次</div>
      </div>
    </div>
  </div>

  <!-- 搜索表单 -->
  <div class="filterContent">
    <a-form layout="inline" :model="filterForm">
      <a-form-item label="计划类型">
        <a-select
          v-model:value="filterForm.planType"
          placeholder="请选择"
          style="width: 180px"
          allowClear
        >
          <a-select-option
            v-for="item in PLAN_TYPE"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="需求响应类型">
        <a-select
          v-model:value="filterForm.companyId"
          placeholder="请选择"
          style="width: 180px"
          allowClear
          show-search
          optionFilterProp="label"
          filter-option
        >
          <a-select-option
            v-for="item in DEMAND_RESPONSE"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="需求计划日期">
        <a-date-picker
          v-model:value="filterForm.planDate"
          placeholder="请选择日期"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          style="width: 180px"
        />
      </a-form-item>

      <a-form-item label="计划名称">
        <a-input
          v-model:value="filterForm.planName"
          placeholder="请输入"
          style="width: 180px"
        />
      </a-form-item>
      <a-form-item label="计划编号">
        <a-input
          v-model:value="filterForm.number"
          placeholder="请输入"
          style="width: 180px"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch" class="filterBtn">
          查询
        </a-button>
        <a-button class="filterBtn greenBtn" @click="handleAdd">
          日前备用申报
        </a-button>
      </a-form-item>
    </a-form>
  </div>

  <!-- 表格 -->
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleView(record)"
            >结算费用详情</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject, nextTick } from "vue"
import useTableScroll from "@/hooks/useTableScroll"
import {
  PLAN_TYPE,
  DEMAND_RESPONSE,
  STATE,
} from "@/constants/VirtualPowerPlant"
const tableData = ref([])
const total = ref(0)
const $api = inject("$api")

const filterForm = reactive({
  planType: null,
  companyId: null,
  planDate: null,
  planName: null,
  number: null,
  current: 1,
  size: 20,
})

const columns = [
  {
    title: "计划编号",
    dataIndex: "planCode",
    key: "planCode",
    width: 120,
    align: "center",
  },
  {
    title: "计划名称",
    dataIndex: "planName",
    key: "planName",
    width: 200,
    align: "center",
  },
  {
    title: "计划类型",
    dataIndex: "planType",
    key: "planType",
    width: 120,
    align: "center",
  },
  {
    title: "需求响应类型",
    dataIndex: "demandResponseType",
    key: "demandResponseType",
    width: 200,
    align: "center",
  },
  {
    title: "价格系数",
    dataIndex: "monthlyDemandCapacity",
    key: "monthlyDemandCapacity",
    width: 150,
    align: "center",
  },

  {
    title: "总结算费用（元）",
    dataIndex: "inviteTime",
    key: "inviteTime",
    width: 150,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 120,
    align: "center",
    fixed: "right",
  },
]

// 获取分页列表
const handleSearch = async () => {
  filterForm.current = 1
  await getList()
}

const tableLoading = ref(false)
const getList = async () => {
  tableLoading.value = true
  try {
    // 这里需要根据实际API调整
    // const res = await $api.getDemandPlanList(filterForm)
    // tableData.value = res.data.records
    // total.value = res.data.total

    // 模拟数据
    tableData.value = [
      {
        id: 1,
        planCode: "GZDY000001",
        planName: "2025年8月需求计划",
        planType: "月度备用",
        demandResponseType: "日前需求响应",
        monthlyDemandCapacity: 10000,
        startDate: "2025-06-01 00:00:00",
        endDate: "2025-06-30 23:59:59",
        demandRange: "全网范围",
        deadlineTime: "2025-05-25 12:00:00",
        currentStatus: "已申报",
        winningBidResult: "未中标",
        applyTime: "2025-06-25 10:26:38",
        inviteTime: "2025-06-20 09:00:00",
      },
      {
        id: 2,
        planCode: "GZDY000002",
        planName: "2025年7月需求计划",
        planType: "需求响应",
        demandResponseType: "日内需求响应",
        monthlyDemandCapacity: 20000,
        startDate: "2025-07-01 00:00:00",
        endDate: "2025-07-31 23:59:59",
        demandRange: "重点区域",
        deadlineTime: "2025-06-25 12:00:00",
        currentStatus: "未申报",
        winningBidResult: "中标",
        applyTime: "2025-07-25 11:12:38",
        inviteTime: "2025-07-20 09:00:00",
      },
      {
        id: 3,
        planCode: "GZDY000003",
        planName: "2025年9月需求计划",
        planType: "月度备用",
        demandResponseType: "日前无功需求响应",
        monthlyDemandCapacity: 15000,
        startDate: "2025-09-01 00:00:00",
        endDate: "2025-09-30 23:59:59",
        demandRange: "城区范围",
        deadlineTime: "2025-08-25 12:00:00",
        currentStatus: "已出清",
        winningBidResult: "中标",
        applyTime: "2025-09-25 14:30:15",
        inviteTime: "2025-09-20 09:00:00",
      },
    ]
    total.value = 3
  } catch (error) {
    console.error("获取列表失败:", error)
  } finally {
    tableLoading.value = false
  }
}

// 新增
const handleAdd = () => {
  console.log("自动生成计划")
  // 这里添加自动生成计划的逻辑
}

// 编辑/查看详情
const handleView = (record) => {}

const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)

// 添加统计数据
const statisticsData = reactive({
  totalSettlementFee: "12,345.62亿",
  publishedPlanCount: "1,234个",
  totalPlanCapacity: "1,234.56kWh",
  demandApplyCount: "1,001次",
  winningBidCount: "1,000次",
})

// 获取统计数据的方法
const getStatisticsData = async () => {
  try {
    // 这里需要根据实际API调整
    // const res = await $api.getStatisticsData()
    // Object.assign(statisticsData, res.data)
  } catch (error) {
    console.error("获取统计数据失败:", error)
  }
}

onMounted(() => {
  getStatisticsData()
  getList()
})
// 参与申报相关
const participateModalVisible = ref(false)
const demandResponseModalVisible = ref(false)

// 参与申报
const handleParticipate = (record) => {
  currentRecord.value = record

  // 根据计划类型判断弹出哪个组件
  if (record.planType === "月度备用") {
    participateModalVisible.value = true
  } else if (record.planType === "需求响应") {
    demandResponseModalVisible.value = true
  }
}
</script>

<style lang="less" scoped>
.filterBtn {
  margin: 0 10px 0 0;
  &:last-child {
    margin-right: 0;
  }
}

.tableContent {
  flex: 1;
  background-color: #1f1f1f;
  border-radius: 4px;
  padding: 16px;

  :deep(.ant-table) {
    background-color: transparent;

    .ant-table-thead > tr > th {
      background-color: #2a2a2a;
      border-bottom: 1px solid #434343;
      color: #fff;
    }

    .ant-table-tbody > tr > td {
      background-color: #1f1f1f;
      border-bottom: 1px solid #434343;
      color: #fff;
    }

    .ant-table-tbody > tr:hover > td {
      background-color: #2a2a2a;
    }
  }
}

:deep(.ant-table) {
  background: #141414;
}

:deep(.ant-pagination) {
  margin-top: 16px;
  text-align: right;
}

.statistics-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.statistics-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 4px;
  background: rgba(25, 144, 255, 0.1);
  border: 1px solid #1990ff;
  color: white;
  margin-right: 16px;

  &:last-child {
    margin-right: 0;
  }
}

.card-icon {
  margin-right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #1990ff;
  text-align: center;
  line-height: 44px;
  .fontIcon {
    font-size: 25px;
    color: #1990ff;
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  .smSize {
    font-size: 14px;
  }
}

.card-title {
  font-size: 14px;
  margin-bottom: 4px;
  color: #1990ff;
}
/* .circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #1990ff;
} */
.card-value {
  font-size: 20px;
  font-weight: bold;
}
</style>
